<template>
	<view class="container">
		<!-- 分销商信息 -->
		<view class="distributor-info">
			<view class="info-content">
				<image :src="distributorInfo.avatar" mode="aspectFill" class="avatar"></image>
				<view class="info">
					<view class="name-wrap">
						<text class="nickname">{{distributorInfo.nickname}}</text>
						<text class="level">{{distributorInfo.level}}</text>
					</view>
					<text class="phone">{{distributorInfo.phone}}</text>
				</view>
			</view>
			<view class="level-info">
				<view class="level-item">
					<text class="value">{{distributorInfo.totalCommission}}</text>
					<text class="label">累计佣金</text>
				</view>
				<view class="level-item">
					<text class="value">{{distributorInfo.availableCommission}}</text>
					<text class="label">可提现佣金</text>
				</view>
				<view class="level-item">
					<text class="value">{{distributorInfo.teamCount}}</text>
					<text class="label">团队人数</text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @tap="navigateToTeam">
					<image src="/static/images/team.png" mode="aspectFit" class="menu-icon"></image>
					<text>团队管理</text>
					<text class="arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateToCommission">
					<image src="/static/images/commission.png" mode="aspectFit" class="menu-icon"></image>
					<text>佣金明细</text>
					<text class="arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateToWithdraw">
					<image src="/static/images/withdraw.png" mode="aspectFit" class="menu-icon"></image>
					<text>佣金提现</text>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="menu-group">
				<view class="menu-item" @tap="navigateToPromotion">
					<image src="/static/images/promotion.png" mode="aspectFit" class="menu-icon"></image>
					<text>推广素材</text>
					<text class="arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateToRules">
					<image src="/static/images/rules.png" mode="aspectFit" class="menu-icon"></image>
					<text>分销规则</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 数据统计 -->
		<view class="stats-section">
			<view class="section-header">
				<text class="title">数据统计</text>
				<view class="date-picker" @tap="showDatePicker">
					<text>{{currentDate}}</text>
					<text class="arrow">▼</text>
				</view>
			</view>
			<view class="stats-content">
				<view class="stats-item">
					<text class="value">{{stats.orderCount}}</text>
					<text class="label">订单数</text>
				</view>
				<view class="stats-item">
					<text class="value">{{stats.orderAmount}}</text>
					<text class="label">订单金额</text>
				</view>
				<view class="stats-item">
					<text class="value">{{stats.commission}}</text>
					<text class="label">佣金收入</text>
				</view>
				<view class="stats-item">
					<text class="value">{{stats.newMembers}}</text>
					<text class="label">新增成员</text>
				</view>
			</view>
		</view>
		
		<!-- 提现按钮 -->
		<view class="withdraw-bar">
			<button class="withdraw-btn" @tap="navigateToWithdraw">立即提现</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 分销商信息
const distributorInfo = ref({
	avatar: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1nx2Xh2Z9tP_!!6000000005155-0-tps-1316-736.jpg',
	nickname: '张三',
	level: '黄金分销商',
	phone: '138****8888',
	totalCommission: '¥1234.56',
	availableCommission: '¥888.88',
	teamCount: '12'
})

// 当前选择的日期
const currentDate = ref('本月')

// 统计数据
const stats = ref({
	orderCount: '128',
	orderAmount: '¥12,345',
	commission: '¥1,234',
	newMembers: '5'
})

// 跳转到团队管理
const navigateToTeam = () => {
	uni.navigateTo({
		url: '/pages/distribution/team'
	})
}

// 跳转到佣金明细
const navigateToCommission = () => {
	uni.navigateTo({
		url: '/pages/distribution/commission'
	})
}

// 跳转到佣金提现
const navigateToWithdraw = () => {
	uni.navigateTo({
		url: '/pages/distribution/withdraw'
	})
}

// 跳转到推广素材
const navigateToPromotion = () => {
	uni.navigateTo({
		url: '/pages/distribution/promotion'
	})
}

// 跳转到分销规则
const navigateToRules = () => {
	uni.navigateTo({
		url: '/pages/distribution/rules'
	})
}

// 显示日期选择器
const showDatePicker = () => {
	uni.showActionSheet({
		itemList: ['今日', '本周', '本月', '本年'],
		success: (res) => {
			const dates = ['今日', '本周', '本月', '本年']
			currentDate.value = dates[res.tapIndex]
			// 这里可以添加根据选择日期加载对应数据的逻辑
		}
	})
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
}

/* 分销商信息样式 */
.distributor-info {
	background-color: #D02B29;
	padding: 40rpx 30rpx;
	color: #FFFFFF;
}

.info-content {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
}

.info {
	flex: 1;
}

.name-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.nickname {
	font-size: 36rpx;
	font-weight: bold;
	margin-right: 20rpx;
}

.level {
	font-size: 24rpx;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.phone {
	font-size: 28rpx;
	opacity: 0.8;
}

.level-info {
	display: flex;
	justify-content: space-between;
	text-align: center;
}

.level-item {
	flex: 1;
}

.level-item .value {
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.level-item .label {
	font-size: 24rpx;
	opacity: 0.8;
}

/* 功能菜单样式 */
.menu-section {
	margin: 20rpx;
}

.menu-group {
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.menu-item text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.menu-item .arrow {
	color: #999;
}

/* 数据统计样式 */
.stats-section {
	margin: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.date-picker {
	display: flex;
	align-items: center;
}

.date-picker text {
	font-size: 28rpx;
	color: #666;
}

.date-picker .arrow {
	margin-left: 10rpx;
	font-size: 24rpx;
}

.stats-content {
	display: flex;
	justify-content: space-between;
	text-align: center;
}

.stats-item {
	flex: 1;
}

.stats-item .value {
	font-size: 36rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.stats-item .label {
	font-size: 24rpx;
	color: #999;
}

/* 提现按钮样式 */
.withdraw-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.withdraw-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
	font-size: 32rpx;
}
</style> 